<!DOCTYPE HTML>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebSocket客户端</title>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
        }

        h1 {
            margin: 10px;
            padding: 5px;
        }

        input {
            width: 300px;
        }

        label {
            display: block;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        button {
            width: 80px;
        }

        input[type="text"],
        button {
            padding: 10px 10px;
            margin-bottom: 20px;
        }

        .lim {
            position: relative;
            margin: 20px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f5f5f5;
        }

        #clearBtn {
            position: absolute;
            top: 34px;
            right: 40px;
        }

        .bt {
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }

        .bt:hover {
            background-color: #45a049;
        }
    </style>
</head>

<body>
    <h1>WebSocket客户端</h1>
    <div class="lim">
        <label for="wsServer">服务</label>
        <input id="wsServer" type="text" value="ws://localhost:9001/home" />
        <button id="connectBtn" class="bt">连接</button>
        <br />
        <label for="messageInput">消息</label>
        <input id="messageInput" type="text" value="Hello world" placeholder="请输入消息内容" />
        <button id="sendBtn" class="bt">发送</button>
    </div>
    <div class="lim">
        <p style="font-size: 18px;color: #f00;">消息内容：</p>
        <button id="clearBtn" class="bt">清空消息</button>
        <div id="messageBox"></div>
    </div>
</body>
<script type="text/javascript">
    let socket;
    const connectBtn = document.getElementById('connectBtn');
    const sendBtn = document.getElementById('sendBtn');
    const clearBtn = document.getElementById('clearBtn');

    // 连接服务
    connectBtn.addEventListener('click', function () {
        socket = new WebSocket(document.getElementById('wsServer').value);
        socket.onopen = function () {
            connectBtn.innerHTML = "已连接";
            connectBtn.style.backgroundColor = "gray";
            connectBtn.disabled = true;
        };
        socket.onmessage = function (event) {
            // console.log('收到消息 <= ' + event.data);
            const pElement = document.createElement('p');
            pElement.innerHTML = "<p>收到消息 <=  " + event.data + "</p >";

            setTimeout(function () {
                document.getElementById('messageBox').appendChild(pElement);
            }, 300);
        };
        socket.onclose = function () {
            console.log('连接关闭');
        };
    });

    // 发送消息
    sendBtn.addEventListener('click', function () {
        if (socket !== undefined && socket.readyState === WebSocket.OPEN) {
            const message = document.getElementById('messageInput').value;
            socket.send(message);
            // console.log("发送消息 <=" + message);
            const pElement = document.createElement('p');
            pElement.innerHTML = "<p>发送消息 =>  " + message + "</p >";
            document.getElementById('messageBox').appendChild(pElement);
        } else {
            alert("WebSocket服务未连接.");
        }
    });

    // 清空消息
    clearBtn.addEventListener('click', function () {
        document.getElementById('messageBox').innerHTML = "";
    });
</script>

</html>